<template>
  <view class="container">
    <!-- 宠物信息表单组：展示当前宠物名称（不可修改） -->
    <view class="form-group">
      <text class="label">宠物信息</text>
      <view class="pet-info">{{ currentPetName }}</view>
    </view>

    <!-- 日期选择表单组：可修改日程日期 -->
  <view class="form-group">
    <text class="label">日程日期</text>
    <picker 
      mode="date" 
      :value="scheduleDate" 
      @change="handleDateChange"
      class="date-picker"
    >
      <view class="picker-display">
        {{ scheduleDate || '请选择日期' }}
      </view>
    </picker>
  </view>

    <!-- 备注输入表单组：可修改日程备注 -->
    <view class="form-group">
      <text class="label">备注信息</text>
      <textarea 
        v-model="notes" 
        placeholder="请输入日程详情"
        class="textarea"
      ></textarea>
    </view>

    <!-- 状态切换表单组：开关控制日程状态 -->
    <view class="form-group">
      <text class="label">日程状态</text>
      <uni-switch 
        v-model="isCompleted" 
        @change="handleStatusChange"
      ></uni-switch>
      <text class="status-text">{{ isCompleted ? '已完成' : '待处理' }}</text>
    </view>

    <!-- 提交按钮：更新日程 -->
    <button class="submit-btn" @click="handleUpdate">更新日程</button>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import petScheduleApi from '@/api/Schedule.js'; // 导入封装的日程API

// 响应式数据定义
const scheduleId = ref('');         // 日程ID（从路由参数获取）
const currentPetName = ref('');     // 宠物名称（展示用，不可修改）
const petId = ref('');              // 宠物ID（关联用，不可修改）
const scheduleDate = ref('');       // 日程日期（可修改）
const notes = ref('');              // 备注信息（可修改）
const isCompleted = ref(false);     // 日程状态（开关控制）
const scheduleData=ref('')			// 获取的单个日程提醒内容

// 页面挂载时执行：获取路由参数并加载日程详情
onMounted(() => {
  // 获取路由参数中的scheduleId
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  scheduleId.value = currentPage.options.scheduleId;
  
  // 加载日程详情
  fetchScheduleDetail();
});

// 获取日程详情：调用API根据日程ID查询
const fetchScheduleDetail = async () => {
  try {
    const res = await petScheduleApi.getSchedulesByScheduleId(scheduleId.value); 
    console.log('获取日程详情返回数据：', res);
    if (res.data.code === 200) {
      scheduleData.value = res.data.data[0];
	  petId.value = scheduleData.value.petId;
	  const Petres=await petScheduleApi.getPetById(petId.value);
      currentPetName.value = Petres.data.data.name;
      const rawDate = scheduleData.value.scheduleDate;
      scheduleDate.value = formatDate(rawDate); // 使用格式化方法
      notes.value = scheduleData.value.notes;
      isCompleted.value = scheduleData.value.status === 1; // 状态映射
    }
  } catch (err) {
    uni.showToast({ title: '获取详情失败', icon: 'none' });
    console.error('获取日程详情失败的错误信息：', err);
  }
};

const handleDateChange = (e) => {
  scheduleDate.value = e.detail.value; // 直接接收 YYYY-MM-DD 格式日期
};

//  formatDate 方法
const formatDate = (dateStr) => {
  if (!dateStr) return '';
  const date = new Date(dateStr);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};

// 状态切换回调：同步开关值到响应式数据
const handleStatusChange = (e) => {
  isCompleted.value = e.value;
};

// 提交更新：调用API更新日程
const handleUpdate = async () => {
  // 表单验证
  if (!scheduleDate.value) {
    return uni.showToast({ title: '请选择日期', icon: 'none' });
  }
  if (!notes.value) {
    return uni.showToast({ title: '请输入备注', icon: 'none' });
  }

  try {
    // 调用更新日程API
    const res = await petScheduleApi.update(scheduleId.value, {
      scheduleDate: scheduleDate.value,
      notes: notes.value
    });
    console.log('更新日程返回数据：', res);
    uni.showToast({ title: '更新成功', icon: 'success' });
    setTimeout(() => {
      uni.navigateBack();
    }, 1500);
  } catch (err) {
    uni.showToast({ title: '更新失败', icon: 'none' });
    console.error('更新日程失败的错误信息：', err);
  }
};
</script>

<style scoped>
	.date-picker {
	  width: 100%;
	  height: 60rpx;
	  border: 1px solid #eee;
	  border-radius: 10rpx;
	  padding: 0 15rpx;
	  box-sizing: border-box;
	}
	.picker-display {
	  line-height: 60rpx;
	  font-size: 26rpx;
	  color: #333;
	}
/* 样式部分确保编辑页布局和交互正常 */
.container {
  padding: 30rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.form-group {
  margin-bottom: 30rpx;
  background-color: #fff;
  padding: 25rpx;
  border-radius: 15rpx;
  display: flex;
  flex-direction: column;
}

.label {
  margin-bottom: 15rpx;
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.pet-info {
  font-size: 28rpx;
  color: #666;
  padding: 10rpx 0;
}

.textarea {
  width: 100%;
  min-height: 150rpx;
  border: 1px solid #eee;
  border-radius: 10rpx;
  padding: 15rpx;
  font-size: 26rpx;
  box-sizing: border-box;
}

.status-text {
  margin-left: 20rpx;
  font-size: 28rpx;
  color: #666;
}

.submit-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background-color: #42b983;
  color: #fff;
  font-size: 32rpx;
  border-radius: 45rpx;
  margin-top: 50rpx;
}
</style>